<script setup lang="ts">
import SectionCard from "@/components/app/section-card.vue";
import { hci } from "@/components/framework/icon";
import { hc } from "@/framework/vue/util/render.ts";
import { CopyOutlined } from "@ant-design/icons-vue";
import EnvVarSetOperation from "@/modules/dev-env/components/env-var-set-operation.vue";
import { ref } from "vue";
import FolderPickerInput from "@/components/framework/folder-picker-input.vue";
import { copyText } from "@/util/clipboard.ts";

const gradleUserHome = ref(native.process.env.GRADLE_USER_HOME || "");
const currentGradleUserHome = ref(native.process.env.GRADLE_USER_HOME);

const distributeMirrors = [
  { name: "腾讯云", url: "https://mirrors.cloud.tencent.com/gradle/" },
  { name: "南京大学", url: "https://mirrors.nju.edu.cn/gradle/" },
  // ...
];
</script>

<template>
  <section-card :icon="hci('icon-gradle')" title="Gradle环境设置">
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" class="pv-20">
      <a-form-item label="GRADLE_USER_HOME" help="Gradle下载、依赖缓存目录，默认为：~/.gradle">
        <div class="flex aic col-gap-10">
          <folder-picker-input v-model:value="gradleUserHome" class="flex-1" />
          <env-var-set-operation name="GRADLE_USER_HOME" :value="gradleUserHome" />
          <a-button :icon="hc(CopyOutlined)" @click="copyText('GRADLE_USER_HOME')">变量名</a-button>
          <a-button :icon="hc(CopyOutlined)" @click="gradleUserHome && copyText(gradleUserHome)">变量值</a-button>
        </div>
        <template #extra>
          <span>当前值：{{ currentGradleUserHome }}</span>
        </template>
      </a-form-item>

      <a-form-item label="下载镜像加速" help="将gradle-wrapper.properties文件中的distributionUrl地址前缀替换掉">
        <div>
          <template v-for="it in distributeMirrors" :key="it.name">
            <div class="flex aic col-gap-10 mb-10">
              <span class="w-100 text-right">{{ it.name }}：</span>
              <a-input :value="it.url" readonly />
              <a-button :icon="hc(CopyOutlined)" @click="copyText(it.url)">复制</a-button>
            </div>
          </template>
        </div>
      </a-form-item>
    </a-form>
  </section-card>
</template>

<style scoped lang="less"></style>
